<template>
  <view :data-theme="theme">
    <view class='my-account'>
      <view class='wrapper'>
        <view class='header'>
          <view class='headerCon'>
            <view class='account acea-row row-top row-between'>
              <view class='assets'>
                <view>账户余额(元)</view>
                <view class='money'>{{ statistics.nowMoney || 0 }}</view>
              </view>
              <view v-show="statistics.rechargeSwitch"
                    @click="openSubscribe('/pages/users/user_payment/index')"
                    class='recharge font_color'>充值
              </view>
            </view>
            <view class='cumulative acea-row row-top'>
              <view class='item' v-if="statistics.rechargeSwitch">
                <view>余额充值(元)</view>
                <view class='money'>{{ statistics.recharge || 0 }}</view>
              </view>
              <view class='item'>
                <view>余额消费(元)</view>
                <view class='money'>{{ statistics.monetary || 0 }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class='nav acea-row row-middle'>
          <navigator class='item' hover-class='none' url='/pages/users/user_bill/index?type=all'>
            <view class='pictrue'>
              <text class="iconfont icon-s-zhangdanjilu icon_txt"></text>
            </view>
            <view>余额记录</view>
          </navigator>
          <navigator class='item' hover-class='none' url='/pages/users/user_bill/index?type=expenditure'>
            <view class='pictrue'>
              <text class="iconfont icon-s-xiaofeijilu icon_txt"></text>
            </view>
            <view>消费记录</view>
          </navigator>
          <navigator class='item' hover-class='none' url='/pages/users/user_bill/index?type=income'
                     v-if="userInfo.rechargeSwitch">
            <view class='pictrue'>
              <text class="iconfont icon-s-chongzhijilu icon_txt"></text>
            </view>
            <view>充值记录</view>
          </navigator>
          <navigator class='item' hover-class='none' url='/pages/merchant/user_integral/index'>
            <view class='pictrue'>
              <text class="iconfont icon-jifenzhongxin icon_txt"></text>
            </view>
            <view>积分中心</view>
          </navigator>
        </view>
      </view>
      <recommend ref="recommendIndex" @getRecommendLength="getRecommendLength"></recommend>
      <view class='noCommodity' v-if="isNoCommodity">
        <view class='pictrue'>
          <image :src="urlDomain+'crmebimage/presets/noShopper.png'"></image>
        </view>
        <text class="text-ccc">暂无商品</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getProductHot
} from '@/api/product.js';
import {
  userActivity,
  getMyAccountApi
} from '@/api/user.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import {
  alipayQueryPayResult
} from '@/api/order.js';
import recommend from "@/components/base/recommend.vue";

let app = getApp();
export default {
  components: {
    recommend
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      isClose: false,
      activity: {},
      hotScroll: false,
      statistics: {},
      hotPage: 1,
      hotLimit: 10,
      theme: app.globalData.theme,
      isNoCommodity: false
    };
  },
  computed: mapGetters(['isLogin', 'userInfo']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.userDalance();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      // #ifdef H5
      var url = window.location.search;
      if (url) {
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          var strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
          }
        }
        this.orderId = theRequest.out_trade_no; //返回的订单号
        this.alipayQueryPay();
      }
      // #endif
      this.userDalance();
    } else {
      toLogin();
    }
  },
  onReachBottom() {
    this.$refs.recommendIndex.get_host_product();
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit('scroll');
  },
  methods: {
    getRecommendLength(e) {
      this.isNoCommodity = e == 0 ? true : false;
    },
    /**
     * 支付宝充值结果查询
     */
    alipayQueryPay() {
      uni.showLoading({
        title: '查询中...'
      });
      alipayQueryPayResult(this.orderId).then(res => {
        this.userDalance();
        return this.$util.Tips({
          title: '充值成功'
        });
        uni.hideLoading();
      }).catch(err => {
        uni.hideLoading();
        return this.$util.Tips({
          title: err
        });
      })
    },
    userDalance() {
      getMyAccountApi().then(res => {
        this.statistics = res.data;
      })
    },
    openSubscribe: function (page) {
      uni.navigateTo({
        url: page,
      });
    }
  }
}
</script>

<style scoped lang="scss">
.my-account .wrapper {
  background-color: #fff;
  padding: 32rpx 0 15rpx 0;
}

.my-account .wrapper .header {
  width: 690rpx;
  height: 330rpx;
  @include main_bg_color(theme);
  border-radius: 16rpx;
  margin: 0 auto;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}

.my-account .wrapper .header .headerCon {
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;
  padding: 36rpx 0 29rpx 0;
  box-sizing: border-box;
}

.my-account .wrapper .header .headerCon .account {
  padding: 0 35rpx;
}

.my-account .wrapper .header .headerCon .account .assets .money {
  font-size: 72rpx;
  color: #fff;
  font-family: 'Guildford Pro';
}

.my-account .wrapper .header .headerCon .account .recharge {
  font-size: 28rpx;
  width: 150rpx;
  height: 54rpx;
  border-radius: 27rpx;
  background-color: #fff9f8;
  text-align: center;
  line-height: 54rpx;
}

.font_color {
  @include main_color(theme);
}

.icon_txt {
  font-size: 43rpx;
  @include main_color(theme);
}

.my-account .wrapper .header .headerCon .cumulative {
  margin-top: 46rpx;
}

.my-account .wrapper .header .headerCon .cumulative .item {
  flex: 1;
  padding-left: 35rpx;
}

.my-account .wrapper .header .headerCon .cumulative .item .money {
  font-size: 48rpx;
  font-family: 'Guildford Pro';
  color: #fff;
  margin-top: 6rpx;
}

.my-account .wrapper .nav {
  height: 155rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.my-account .wrapper .nav .item {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.my-account .wrapper .nav .item .pictrue {
  width: 44rpx;
  height: 44rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
}

.my-account .wrapper .nav .item .pictrue image {
  width: 100%;
  height: 100%;
}

.my-account .wrapper .advert {
  padding: 0 30rpx;
  margin-top: 30rpx;
}

.my-account .wrapper .advert .item {
  background-color: #fff6d1;
  width: 332rpx;
  height: 118rpx;
  border-radius: 10rpx;
  padding: 0 27rpx 0 25rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #e44609;
}

.my-account .wrapper .advert .item.on {
  background-color: #fff3f3;
  color: #e96868;
}

.my-account .wrapper .advert .item .pictrue {
  width: 78rpx;
  height: 78rpx;
}

.my-account .wrapper .advert .item .pictrue image {
  width: 100%;
  height: 100%;
}

.my-account .wrapper .advert .item .text .name {
  font-size: 30rpx;
  font-weight: bold;
  color: #f33c2b;
  margin-bottom: 7rpx;
}

.my-account .wrapper .advert .item.on .text .name {
  color: #f64051;
}

.my-account .wrapper .list {
  padding: 0 30rpx;
}

.my-account .wrapper .list .item {
  margin-top: 44rpx;
}

.my-account .wrapper .list .item .picTxt .iconfont {
  width: 82rpx;
  height: 82rpx;
  border-radius: 50%;
  background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
  text-align: center;
  line-height: 82rpx;
  color: #fff;
  font-size: 40rpx;
}

.my-account .wrapper .list .item .picTxt .iconfont.yellow {
  background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
}

.my-account .wrapper .list .item .picTxt .iconfont.green {
  background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
}

.my-account .wrapper .list .item .picTxt {
  width: 428rpx;
  font-size: 30rpx;
  color: #282828;
}

.my-account .wrapper .list .item .picTxt .text {
  width: 317rpx;
}

.my-account .wrapper .list .item .picTxt .text .infor {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}

.my-account .wrapper .list .item .bnt {
  font-size: 26rpx;
  color: #282828;
  width: 156rpx;
  height: 52rpx;
  border: 1rpx solid #ddd;
  border-radius: 26rpx;
  text-align: center;
  line-height: 52rpx;
}

.my-account .wrapper .list .item .bnt.end {
  font-size: 26rpx;
  color: #aaa;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
}
</style>
